<template>
  <div class="pageBox">
    <div class="searchBox flex-between" @click="$router.push('/search')">
      <van-icon name="arrow-left" size="18px" @click="$router.go(-1)" />
      <div class="seaCenter flex-row">
        <img src="@/image/home/sousuo_icn@2x.png" alt="" />
        <input type="text" placeholder="输入搜索关键词" v-model="seaValue" />
      </div>
      <button class="seaBtn" @click="onSeaBtn">搜索</button>
    </div>
    <div class="content">
      <div class="exchangeBox">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <div class="goodsList flex-between">
            <div class="goodsItem" v-for="item in list" :key="item.id" @click="goGoodsDetails(item)">
              <img class="goodsIcon" :src="item.thumbUrl" alt="" />
              <div class="goodsTitle oneHidden">{{ item.title }}</div>
              <div class="goodsPrice flex-row">
                <p>¥{{ item.marketprice }}</p>
                <del>¥{{ item.productprice }}</del>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, ref } from "vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  setup() {
    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(true);
    const finished = ref(true);

    const seaValue = ref("");

    function onSeaBtn() {
      if (!seaValue.value) {
        Toast("请输入搜索关键词");
        return;
      }
      onLoad();
    }

    function onLoad() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "2000",
        data: {
          lastId: lastId.value,
          page: page.value,
          sort: "",
          cateId: "",
          genre: "",
          isrecommand: "",
          keyword: seaValue.value,
        },
      }).then((res) => {
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }
    function goGoodsDetails(param) {
      router.push({
        path: "/goodsDetails",
        query: {
          id: param.id,
        },
      });
    }
    return {
      seaValue,
      page,
      lastId,
      list,
      loading,
      finished,
      onLoad,
      goGoodsDetails,
      onSeaBtn,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .searchBox {
    width: 100%;
    height: 88px;
    background-color: #fff;
    padding: 0 30px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;

    .seaCenter {
      width: 488px;
      height: 60px;
      background: #ffffff;
      border-radius: 30px;
      border: 1px solid #cccccc;
      padding-left: 20px;
      img {
        width: 32px;
        height: 32px;
      }
      input {
        background-color: transparent;
        border: none;
        padding-left: 6px;
        color: #333;
      }
    }
    .seaBtn {
      border: none;
      background: transparent;
      font-size: 26px;
      font-weight: 400;
      color: #333;
      line-height: 37px;
    }
  }
  .content {
    padding: 30px;
    .exchangeBox {
      margin-top: 25px;
    }
    .goodsList {
      margin-top: 30px;
      flex-wrap: wrap;
      justify-content: flex-start;
      .goodsItem {
        width: 48%;
        border-radius: 16px;
        background: #ffffff;
        padding-bottom: 16px;
        position: relative;
        margin: 0 4px 20px;
        .goodsIcon {
          width: 100%;
          height: 260px;
          border-radius: 12px 12px 0px 0px;
        }
        .hot {
          width: 64px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 140px;
          z-index: 1;
        }
        .goodsTitle {
          font-size: 28px;
          font-weight: 500;
          color: #333333;
          padding: 10px 0 0 12px;
          width: 100%;
        }
        .goodsPrice {
          padding: 9px 0 0 12px;
          align-items: flex-end;
          p {
            font-size: 36px;
            font-weight: 500;
            color: #e00b12;
          }
          del {
            font-size: 22px;
            font-weight: 400;
            color: #b3b3b3;
            padding-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>